<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .layui-fluid {
      padding: 15px 15px 0;
    }

    .top_content {
      /* color: aqua; */
      background-color: #FAFAFA;
      margin-right: 10px;
      padding-left: 30px;
    }

    .top_content p {
      color: #1E9FFF;
      font-size: 40px;
      font-weight: 700;
      line-height: 45px;
    }

    .down_content {
      height: 400px;
      /* background-color: red; */
    }

    .header_title {
      font-size: 20px;
    }

    .top_content .header_top_content {
      font-size: 16px;
      /* margin-left: 20px;
       */
      padding-left: 20px;
    }
  </style>
</head>

<body>
  <!-- 头部区域 -->
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header"><span class="header_title">数据统计</span> </div>
      <div class="layui-card-body">
        <div class="layui-row layui-col-space5">
          <div class="layui-col-md3 top_banner ">
            <div class="top_content">
              <p><%= data.pc_count %> </p>
              <span class="header_top_content">项目分类</span>

            </div>
          </div>
          <div class="layui-col-md3 top_banner ">
            <div class="top_content">
              <p><%= data.pi_count %> </p>
              <span class="header_top_content">项目数</span>

            </div>
          </div>
          <div class="layui-col-md3 top_banner ">
            <div class="top_content">
              <p><%= data.ac_count %></p>
              <span class="header_top_content">资讯分类数</span>

            </div>
          </div>
          <div class="layui-col-md3 top_banner ">
            <div class="top_content">
              <p><%= data.ai_count %></p>
              <span class="header_top_content">新闻数</span>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 内容表格区域 -->
  <div class="layui-fluid">
    <div class="layui-row layui-col-space10">
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-body">
            <div class="down_content" id="project">
              <!-- 图标内容 -->
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-body">
            <div class="down_content" id="artcile">

            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-body">
            <div class="down_content" id="artcile_visit">

            </div>
          </div>
        </div>
      </div>
    </div>

</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>
<script src="/admin/lib/echarts.min.js"></script>
<script src="/admin/lib/vintage.js"></script>
<script>
  var $ = layui.$
  // 发请求获取数据
  $.ajax({
    type: 'get',
    url: '/admin/echarts/list',
    success: res => {
      if (res.code == 1) {
        console.log(res.data);
        // var data = res.data.data
        var projectData = res.data.projectData
        echartslist(projectData)
        var articleDate = res.data.articleDate
        // console.log(articleDate);
        echartsArticle(articleDate)
        var ai_name = res.data.articleName
        var ai_visit = res.data.artcileVisit
        echartsArticleVisitList(ai_name, ai_visit)
      }
    }
  })

  function echartslist(data) {
    var myChart = echarts.init(document.getElementById('project'))

    var option = {
      title: {
        text: '产品数据类名表',
        subtext: '产品一览',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [{
        name: '产品分类名称以及数量',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };
    myChart.setOption(option)
  }

  // 获取文章数据

  // 文章中空圆饼图图
  function echartsArticle(data) {
    var myArtcileChart = echarts.init(document.getElementById('artcile'))
    var option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [{
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }]
    };
    myArtcileChart.setOption(option)
  }



  // // 文章浏览量表
  // TODO:
  function echartsArticleVisitList(ai_name, ai_visit) {
    var myArtcile_visChart = echarts.init(document.getElementById('artcile_visit'))
    var option = {
      title: {
        text: '文章浏览量一览表'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ai_name
      },
      series: [{
          name: '浏览量',
          type: 'bar',
          data: ai_visit
        },

      ]
    };

    myArtcile_visChart.setOption(option)
  }
</script>
<script>
  // 第二个参数可以指定前面引入的主题
</script>